/**
 * desc：  LoginByPhoneNumber
 * author：frandy
 * date：  2020/3/31 2:53 下午
 */
import React, {PureComponent} from 'react';
import {View, Text, TextInput, StatusBar} from 'react-native';
import {Toast} from 'teaset'
import {LoginByPhoneNumberSty} from './theme'
import {Button} from "../../components";
import {color} from "../../utils";

export default class LoginByPhoneNumber extends PureComponent {

    static defaultProps = {};

    static propTypes = {};

    constructor(props) {
        super(props);
        this.state = {
            phone: ''
        }
    }

    toNext = () => {
        const {phone} = this.state
        if (phone.length < 10) return Toast.fail('手机号应该是11位数字');
        this.props.navigation.navigate('LoginByPhoneNumberNext', {phone})
    }


    render() {
        const {phone} = this.state;
        return (
            <View>
                <StatusBar backgroundColor='rgba(0,0,0,0)' translucent barStyle="dark-content"/>
                <Text style={LoginByPhoneNumberSty.tipSty}>未注册手机号登录后将自动创建账号</Text>
                <View style={LoginByPhoneNumberSty.inputPhone}>
                    <Text style={LoginByPhoneNumberSty.perNum}>+86</Text>
                    <TextInput
                        maxLength={20}
                        style={LoginByPhoneNumberSty.phoneSty}
                        placeholder={'输入手机号'}
                        autoFocus
                        keyboardType={'phone-pad'}
                        onChangeText={phone => this.setState({
                            phone
                        })}
                        returnKeyType={'next'}
                        returnKeyLabel={'下一步'}
                        onSubmitEditing={() => this.toNext()}
                        underlineColorAndroid={'transparent'}
                    />
                </View>
                <Button
                    btStyle={{
                        backgroundColor: phone.length ? color.theme : 'rgb(255,185,185)',
                        width: '90%',
                        marginTop: 40
                    }}
                    disabled={!phone.length}
                    titleStyle={LoginByPhoneNumberSty.titleSty}
                    onPress={() => this.toNext()}
                    title={'下一步'}
                />

            </View>
        );
    }
}


